<template>
    <div class="module5">
        <div class="top">
            <header>
                <h2>车辆总信息</h2>
            </header>
            <div class="container">
                <div class="chart">
                    <div id="chart2"></div>
                    <div class="category">
                        <div class="item">
                            <div style="background-color:#7bcb53"></div>
                            <span>在内车辆240</span>
                        </div>
                        <div class="item">
                            <div style="background-color:#FFC760"></div>
                            <span>在外车辆50</span>
                        </div>
                        <div class="item">
                            <div style="background-color:#fa001f"></div>
                            <span>未知车辆30</span>
                        </div>
                        <!-- <div class="item">
                            <div style="background-color:#BA7BFB"></div>
                            <span>车辆总数300</span>
                        </div> -->
                    </div>
                </div>
                <div class="table">
                    <svg width="30px" height="30px" style="position: absolute; left: 0; top: 0">
                        <polygon points="30,0 20,0 0,20 0,30 1,30 1,19 19,1 30,1" fill="#4BBEFA" stroke="#4BBEFA" stroke-width="2"></polygon>
                    </svg>
                    <svg width="30px" height="30px" style="position: absolute; left: 0; bottom: 0; transform: rotate(-90deg)">
                        <polygon points="30,0 20,0 0,20 0,30 1,30 1,19 19,1 30,1" fill="#4BBEFA" stroke="#4BBEFA" stroke-width="2"></polygon>
                    </svg>
                    <svg width="30px" height="30px" style="position: absolute; right: 0; bottom: 0; transform: rotate(-180deg)">
                        <polygon points="30,0 20,0 0,20 0,30 1,30 1,19 19,1 30,1" fill="#4BBEFA" stroke="#4BBEFA" stroke-width="2"></polygon>
                    </svg>
                    <svg width="30px" height="30px" style="position: absolute; right: 0; top: 0; transform: rotate(90deg)">
                        <polygon points="30,0 20,0 0,20 0,30 1,30 1,19 19,1 30,1" fill="#4BBEFA" stroke="#4BBEFA" stroke-width="2"></polygon>
                    </svg>
                    <dv-scroll-board :config="config" style="width:98%;height:100%" />
                </div>
            </div>
        </div>
        <div class="bottom">
            <header>
                <h2>监控情况</h2>
            </header>
            <div class="container">
                <div @click="openMonitor">
                    <img src="../assets/img/3.png" alt="">
                </div>
                <div @click="openThermalImage">
                    <img src="../assets/img/1.jpg" alt="">
                </div>
                <div @click="openMonitor">
                    <img src="../assets/img/4.png" alt="">
                </div>
                <div @click="openThermalImage">
                    <img src="../assets/img/2.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name: "module5",
    data() {
        return {
            config: {
                header: ["驿站", "车辆总数", "在内", "在外", "未知"],
                data: [
                    ["金凯地小区", 200, 10, 10, 10],
                    ["尖家兜小区", 200, 10, 10, 10],
                    ["浔溪秀城小区", 200, 10, 10, 10],
                    ["金凯地小区", 200, 10, 10, 10],
                    ["尖家兜小区", 200, 10, 10, 10],
                    ["金凯地小区", 200, 10, 10, 10],
                    ["尖家兜小区", 200, 10, 10, 10],
                    ["浔溪秀城小区", 200, 10, 10, 10],
                    ["尖家兜小区", 200, 10, 10, 10],
                    ["金凯地小区", 200, 10, 10, 10],
                    ["浔溪秀城小区", 200, 10, 10, 10],
                    ["金凯地小区", 200, 10, 10, 10],
                ],
                columnWidth: [100],
                headerBGC: "rgba(255,255,255,0)",
                oddRowBGC: "rgba(255,255,255,0)",
                evenRowBGC: "rgba(255,255,255,0)",
                rowNum: 8,
                align: ["center", "center", "center", "center", "center"],
                carousel: "single",
                headerHeight: 40
            },
            option: {
                color: ["#7bcb53", "#FFC760", "#fa001f", /* "#BA7BFB" */],
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: [60, 100],
                        center: ['50%', '45%'],
                        itemStyle: {
                            borderRadius: 10,
                            borderWidth: 2
                        },
                        // 高亮状态的扇区和标签样式(等同于选中)
                        emphasis: {
                            scale: false,
                            label: {
                                show: false
                            },
                            focus: "none"
                        },
                        labelLine: {
                            show: false
                        },
                        label: {
                            show: false,
                            position: "center",
                            formatter: ` {b}\n\n{c}`
                        },
                        selectedMode: "single",
                        selectedOffset: 4,
                        select: {
                            label: {
                                show: true,
                                color: "#fff",
                                fontSize: 16,
                                fontWeight: "bolder"
                            },
                            itemStyle: {
                            }
                        },
                        data: [
                            {value: 240, name: '在内车辆'},
                            {value: 50, name: "在外车辆"},
                            {value: 30, name: "未知车辆"},
                            // {value: 300, name: "车辆总数"},
                        ],
                        silent: true,//是否响应鼠标事件，false为响应
                        animation: true,
                    }
                ]
            },
            selected: 0
        }
    },
    mounted() {
        this.chartLoad()
    },
    methods: {
        openMonitor() {
            this.$emit("showMonitor");
        },
        openThermalImage() {
            this.$emit("showThermalImage");
        },
        chartLoad() {
            let chart = echarts.init(document.getElementById("chart2"));
            chart.setOption(this.option);
            this.changeSelect(chart)
        },
        changeSelect(chartInstance) {
            let {data} = this.option.series[0];
            chartInstance.dispatchAction({
                type: "select",
                seriesIndex: 0,
                name: data[this.selected].name
            });
            this.selected++;
            if(this.selected === data.length) {
                this.selected = 0;
            }
            setTimeout(()=> {
                this.changeSelect(chartInstance)
            } , 3000);
        }
    }
}
</script>

<style scoped>
.module5 {
    height: 100%;
}
.module5 header {
    padding: 12px 0 12px 36px;
}
.module5 header h2 {
    color: #fff;
    font-size: 18px;
    position: relative;
}
.module5 header h2::after {
    content: "";
    display: block;
    width: 4px;
    height: 100%;
    position: absolute;
    top: 0;
    left: -12px;
    background-color: #02C6FF;
}
.module5 .top {
    height: 55%;
    display: flex;
    flex-direction: column;
}
.module5 .top .container {
    flex: 1;
    display: flex;
}
.module5 .top .container .chart {
    width: 45%;
    position: relative;
}
.module5 .top .container .chart #chart2 {
    height: 100%;
}
.module5 .top .container .chart .category {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
}
.module5 .top .container .chart .category .item {
    width: 50%;
    color: #fff;
    font-size: 12px;
    margin-bottom: 6px;
    text-align: center;
    display: flex;
    align-items: center;
}
.module5 .top .container .chart .category .item div {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-left: 3px;
}
.module5 .top .container .chart .category .item span {
    padding-left: 3px;
}
.module5 .top .container .table {
    width: 55%;
    position: relative;
}
.module5 .bottom {
    height: 45%;
    display: flex;
    flex-direction: column;
}
.module5 .bottom .container {
    flex: 1;
    padding: 0 24px 1%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
}
.bottom .container div {
    width: 49%;
    height: 49%;
}
.bottom .container div img {
    width: 100%;
    height: 100%;
}
</style>